import React from "react";
import {List} from "./list";
import {useState} from "react";
import {SearchPanel} from "./searchPanel";
import {useDebounce} from "../../utils";
import styled from "@emotion/styled";
import {Typography} from "antd";
import {useProjects} from "../../utils/project";
import {useUsers} from "../../utils/user";

export const ProjectListScreen = () =>{
    const [param, setParam] = useState({
        name : '',
        personId : ''
    },)
    const debouncedParam = useDebounce(param, 200)
    const {isLoading, error, data:list} = useProjects(debouncedParam)
    const {data:users} = useUsers()

    return<Container>
        <h1>项目列表</h1>
        <SearchPanel param={param} users={users || []} setParam={setParam}/>
        {error ? <Typography.Text type={"danger"}>{error.message}</Typography.Text> : null}
        <List loading={isLoading} dataSource={list || []} users={users || []}/>
    </Container>
}

const Container = styled.div`
padding: 3.2rem`